<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentTime = ref('')
const greeting = ref('')
const countdownTimer = ref(null)

// 格式化时间显示
const formatTime = () => {
  const date = new Date()
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  const seconds = date.getSeconds().toString().padStart(2, '0')
  currentTime.value = `${hours}:${minutes}:${seconds}`
}

// 设置问候语
const setGreeting = () => {
  const greetings = [
    '相遇即是美好',
    '每一刻都值得记录',
    '发现生活中的小确幸',
    '记录美好，分享感动',
    '生活需要仪式感'
  ]
  const randomIndex = Math.floor(Math.random() * greetings.length)
  greeting.value = greetings[randomIndex]
}

// 处理页面点击事件
const handlePageClick = () => {
  // 标记已访问过开始页面
  localStorage.setItem('hasVisitedStartPage', 'true')
  
  // 直接跳转到主页，不再经过登录页面
  router.push('/home')
}

// 重置倒计时
const resetCountdown = () => {
  if (countdownTimer.value) {
    clearTimeout(countdownTimer.value)
  }
  
  // 60秒后返回开始页面
  countdownTimer.value = setTimeout(() => {
    // 记录当前页面，以便返回
    if (window.location.pathname !== '/' && window.location.pathname !== '/startpage') {
      localStorage.setItem('previousPage', window.location.pathname)
    }
    router.replace('/')
  }, 60000)
}

// 监听用户活动
const setupActivityListeners = () => {
  const activityEvents = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart']
  
  activityEvents.forEach(event => {
    document.addEventListener(event, resetCountdown)
  })
  
  return () => {
    activityEvents.forEach(event => {
      document.removeEventListener(event, resetCountdown)
    })
  }
}

onMounted(() => {
  formatTime()
  setGreeting()
  
  // 每秒更新时间
  const timeInterval = setInterval(formatTime, 1000)
  
  // 设置用户活动监听
  const cleanupListeners = setupActivityListeners()
  
  // 开始倒计时
  resetCountdown()
  
  onUnmounted(() => {
    clearInterval(timeInterval)
    clearTimeout(countdownTimer.value)
    cleanupListeners()
  })
})
</script>

<template>
  <div class="start-page" @click="handlePageClick">
    <!-- 背景图片 -->
    <div class="background-image"></div>
    
    <!-- 内容区域 -->
    <div class="content-wrapper">
      <h1 class="time-display">{{ currentTime }}</h1>
      <p class="greeting-text">{{ greeting }}</p>
      <p class="click-hint">点击进入小红书</p>
    </div>
  </div>
</template>

<style scoped>
/* 开始页面样式 */
.start-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

/* 背景图片 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://img95.699pic.com/xsj/0r/8l/xp.jpg!/fh/1200');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.7);
  z-index: 1;
}

/* 内容包装器 */
.content-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  animation: fadeIn 1s ease-in-out;
}

/* 时间显示 */
.time-display {
  font-size: 6rem;
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 问候语 */
.greeting-text {
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: 30px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
}

/* 点击提示 */
.click-hint {
  font-size: 1rem;
  opacity: 0.7;
  animation: pulse 2s infinite;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .time-display {
    font-size: 4rem;
  }
  
  .greeting-text {
    font-size: 1.2rem;
  }
  
  .click-hint {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .time-display {
    font-size: 3rem;
  }
  
  .greeting-text {
    font-size: 1rem;
  }
}
</style>